<template>
  <div class="search-page">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <input class="search-input" type="text" v-model="InputText" @keyup.enter="Input_shuru()" placeholder="请输入关键字或作品名" />
      <button class="search-btn" @click="Input_shuru()">搜索</button>
    </div>

    <div class="main-content">
      <!-- 左侧内容区 -->
      <div class="left-content">
        <!-- 筛选条件区 -->
        <div class="filter-box">
          
          <div class="filter-row">
            <span :class="FenleiID==index?'filter-label':'filter-item'" v-for="(item,index) in Fenlei " :key="index" @click="FenDian(index)">
              {{ item }}
            </span>
          </div>
          <div class="filter-row">
            <span :class="Gxid==index?'filter-label':'filter-item'" v-for="(item,index) in GXTiem" :key="index" @click="gxid(index)">
              {{item}}
            </span>
          </div>
        </div>

        <!-- 小说列表区 -->
        <div class="book-list">
          <div class="book-item" v-for="(book, idx) in books" :key="idx">
            <img class="book-cover" :src="book.image" :alt="book.title" />
            <div class="book-info">
              <div class="book-title-row">
                <span class="book-title">{{ book.title }}</span>
                <span class="book-tag">{{ book.introduce }}</span>
              </div>
              <div class="book-meta">
                <span>{{ book.author }}</span> |
                <span>{{ book.sort[0] }}</span> |
                <span>{{ book.over }}</span>
              </div>
              <div class="book-desc">{{ book.contents }}</div>
              <div class="book-stats">
                <div>
                    <span>{{ book.zishu }}字</span>
                    <span>{{ book.tiannum }}总推荐</span>
                </div>
                
                <div class="book-actions">
                    <button class="detail-btn" @click="BookXq(book.id)">作品详情</button>
                    <button class="add-btn" @click="BookShuJia(book.id)">加入收藏</button>
                </div>
              </div>
              
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧推荐栏 -->
      <div class="right-bar">
        <div class="right-title">本周强推</div>
        <div class="right-list">
          <div class="right-item" v-for="(item, idx) in rightBooks" :key="idx" @click="BookXq(item.id)">
            <img class="right-cover" :src="item.image" :alt="item.title" />
            <div class="right-info">
              <div class="right-title2">{{ item.title }}</div>
              <div class="right-meta">{{ item.author }} · {{ item.sort[0] }}</div>
              <div class="right-desc">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  name: 'AishubenSearchPage',
  data() {
    return {
      Fenlei: [
        '全部',
        '奇幻',
        '成长',
        '都市',
        '社会',
        '喜剧',
        '冒险',
        '治愈',
        '科幻',
        '悬疑',
        '情感',
        '玄幻'
      ],
      FenleiID:0,
      GXTiem:[
        '全部',
        '3日内',
        '7日内',
        '半月内',
        '一月内'
      ],
      Gxid:0,
      // 搜索输入框内容
      InputText:'',
      books:[],
      rightBooks: [],
    };
  },
  mounted() {
    axios.get('/api/index/morenshuju')
    .then(response => {
      this.books = response.data.moren;
      // console.log('初始数据加载成功:',response.data.moren[0]);

    }).catch(error => {
      this.$message.error('搜索失败，请稍后再试');
    });
    // 初始加载推荐数据
    axios.get('/api/index/tuijians')
    .then(response => {
      this.rightBooks = response.data.moren;
      // console.log('本周强推:',response.data);

    }).catch(error => {
      this.$message.error('搜索失败，请稍后再试');
    });
  },
  methods: {

    //分类点击
    FenDian(index) {
      this.FenleiID = index;
      if(this.InputText!==''){
        this.FangFa(this.InputText,this.Fenlei[this.FenleiID],this.GXTiem[this.Gxid]);
      }else{
        this.$message.warning('请输入搜索内容');
      }
    },
    //更新时间点击
    gxid(index) {
      this.Gxid = index;
      if(this.InputText!==''){
        this.FangFa(this.InputText,this.Fenlei[this.FenleiID],this.GXTiem[this.Gxid]);
      }else{
        this.$message.warning('请输入搜索内容');
      }
    },
    //跳转详情
    BookXq(id){
      this.$router.push('/BooKDetails/' + id);
    },
    //加入收藏
    BookShuJia(id) {
      this.$message.success('已加入收藏');
      // 这里可以添加逻辑将书籍添加到收藏
    },
    //输入
    Input_shuru(){
      if(this.InputText!==''){
        this.FangFa(this.InputText,this.Fenlei[this.FenleiID],this.GXTiem[this.Gxid]);
      }else{
        this.$message.warning('请输入搜索内容');
      }
    },
    //方法 请求
    FangFa(values,lei,sj){
      axios.post('/api/index/search', {
        title: values,
        sorttitle: lei,
        timenum: sj 
        }).then(response => {
          // 假设返回的数据格式与 books 相同
          console.log('搜索结果:', response);
          if(response.data.code == 1) {
            this.books = response.data.xinxi;
          }else{
            this.$message.error('搜索失败，'+response.data.xinxi);
          }
        }).catch(error => {
          console.error('搜索失败:', error);
          this.$message.error('搜索失败，请稍后再试');
        });
    }
  },
};
</script>

<style scoped>
/* 页面整体布局 */
.search-page {
    
  min-height: 100vh;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部搜索栏 */
.search-bar {
 max-width:1200px;
 width:1200px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 32px 0 0px 0;
  background: #fff;
}
.search-input {
  width: 340px;
  height: 38px;
  border: 1px solid #d9d9d9;
  border-radius: 2px 0 0 2px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}
.search-btn {
  height: 40px;
  background: #b63228;
  color: #fff;
  border: none;
  border-radius: 0 2px 2px 0;
  font-size: 16px;
  padding: 0 28px;
  cursor: pointer;
  margin-left: -1px;
  transition: background 0.2s;
}
.search-btn:hover {
  background: #a12a22;
}

/* 主体内容布局 */
.main-content {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 18px;
}

.left-content {
  flex: 1;
  margin-right: 32px;
  min-width: 90px;
}

/* 筛选区 */
.filter-box {
  background: #f8f6f2;
  border-radius: 6px;
  padding: 18px 18px 8px 18px;
  margin-bottom: 18px;
  font-size: 15px;
}
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.filter-label {
  color: #d00000;
  background: #ffecec;
  border-radius: 3px;
  padding: 2px 10px;
  margin-right: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.filter-all,
.filter-item {
  color: #444;
  background: #f3f3f3;
  border-radius: 3px;
  padding: 2px 10px;
  margin-right: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.filter-all.active,
.filter-item.active {
  background: #b63228;
  color: #fff;
}

/* 标签栏 */
.tab-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 18px;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
.tab {
  font-size: 15px;
  color: #b63228;
  padding: 12px 18px 10px 0;
  cursor: pointer;
  transition: color 0.2s;
}
.tab.active {
  font-weight: bold;
  border-bottom: 2px solid #b63228;
}

/* 小说列表区 */
.book-list {
  background: #fff;
  border-radius: 6px;
  padding: 10px 0 10px 0;
}
.book-item {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #f0f0f0;
  padding: 18px 18px 12px 18px;
}
.book-item:last-child {
  border-bottom: none;
}
.book-cover {
  width:110px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 18px;
  background: #f2f2f2;
  box-shadow: 0 0 8px 0 rgb(118, 118, 118);
}
.book-info {
  flex: 1;
  min-width: 0;
}
.book-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.book-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  margin-right: 10px;
}
.book-tag {
  font-size: 13px;
  color: #b63228;
  background: #f8eaea;
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 2px;
}
.book-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.book-desc {
  font-size: 14px;
  color: #444;
  margin-bottom: 8px;
  line-height: 1.6;
  word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 超出几行省略 */
    overflow: hidden;
}
.book-stats {
  font-size: 13px;
  color: #b63228;
  margin-bottom: 8px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.book-stats span{
  margin-right: 5px;

}
.book-actions {
  display: flex;
  gap: 10px;
}
.detail-btn {
  background: #b63228;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 6px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.detail-btn:hover {
  background: #a12a22;
}
.add-btn {
  background: #fff;
  color: #b63228;
  border: 1px solid #b63228;
  border-radius: 3px;
  padding: 6px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.add-btn:hover {
  background: #f8eaea;
}

/* 右侧推荐栏 */
.right-bar {
  width: 260px;
  flex-shrink: 0;
}
.right-title {
  font-size: 17px;
  font-weight: bold;
  color: #222;
}
.right-list {
  background: #fff;
  border-radius: 6px;
  padding: 0px 0 10px 0;
}
.right-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 0px;
  border-bottom: 1px solid #f0f0f0;
}
.right-item:last-child {
  border-bottom: none;
}
.right-cover {
  width: 70px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
  background: #f2f2f2;
  cursor: pointer;
  box-shadow: 0 0 8px 0 rgb(118, 118, 118);
}
.right-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.right-title2 {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.right-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 5px;
}
.right-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4; 
  word-break: break-all;
text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* 超出几行省略 */
   overflow: hidden;
}
</style>
